<template>
  <el-row class="photo-view">
    <el-col :span="16">
      <div class="main-pic">
        <img :src="hotelPics[hotelPicNumber]" alt />
      </div>
    </el-col>
    <el-col :span="8">
      <div class="list-pic">
        <el-row class="list-item">
          <el-col
            :span="12"
            style="padding:0 10px;cursor: pointer"
            v-for="(pic,index) in hotelPics"
            :key="index"
          >
            <img :src="pic" alt @click="changePic(index)" />
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      // 图片的编号切换
      hotelPicNumber: 0,
      // 图片的数据
      hotelPics: [
        "http://157.122.54.189:9093/images/hotel-pics/1.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/2.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/3.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/4.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/5.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/6.jpeg"
      ]
    };
  },
  methods: {
    changePic(newPic) {
      this.hotelPicNumber = newPic;
      console.log(newPic);
    }
  }
};
</script>

<style lang="less" scoped>
.main-pic {
  position: relative;
  width: 640px;
  height: 360px;
  img {
    width: 100%;
    height: 100%;
  }
}
.list-pic {
  .list-item {
    margin: 0 -10px;
  }
  img {
    width: 160px;
    margin-bottom: 10px;
  }
}
</style>